@use "sass:map";
@use "sass:color";

/* flex 居中 */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-center--row {
    display: flex;
    justify-content: center;
}
.flex-center--column {
    display: flex;
    align-items: center;
}

/* clearfix */
.clearfix::after {
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
    content: "";
}

/* 文字单行省略号 */
.sle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 文字多行省略号 */
.mle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 文字多了自動換行 */
.break-word {
    word-break: break-all;
    word-wrap: break-word;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.2s;
}
.fade-transform-enter-from {
    opacity: 0;
    transition: all 0.2s;
    transform: translateX(-30px);
}
.fade-transform-leave-to {
    opacity: 0;
    transition: all 0.2s;
    transform: translateX(30px);
}

/* Breadcrumb */
.breadcrumb-enter-active {
    transition: all 0.2s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
    opacity: 0;
    transform: translateX(10px);
}

/* scroll bar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background-color: #d3d3d3;
    border-radius: 20px;
    box-shadow: inset 0 0 0 white;
}

/* nprogress样式 */
#nprogress .bar {
    background: var(--el-color-primary) !important;
}
#nprogress .spinner-icon {
    border-top-color: var(--el-color-primary) !important;
    border-left-color: var(--el-color-primary) !important;
}
#nprogress .peg {
    box-shadow:
        0 0 10px var(--el-color-primary),
        0 0 5px var(--el-color-primary) !important;
}

/*************** start ****************/

/* 外边距、内边距全局样式 */

/***********************************   */

@for $i from 0 through 40 {
    .mt#{$i} {
        margin-top: #{$i}px !important;
    }
    .mr#{$i} {
        margin-right: #{$i}px !important;
    }
    .mb#{$i} {
        margin-bottom: #{$i}px !important;
    }
    .ml#{$i} {
        margin-left: #{$i}px !important;
    }
    .pt#{$i} {
        padding-top: #{$i}px !important;
    }
    .pr#{$i} {
        padding-right: #{$i}px !important;
    }
    .pb#{$i} {
        padding-bottom: #{$i}px !important;
    }
    .pl#{$i} {
        padding-left: #{$i}px !important;
    }
}

/***************  end  ****************/

/*************** start ****************
* 按钮全局样式，包括5中类型 *
***********************************   */
.btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 8px 15px;
    margin-left: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    appearance: none;
    cursor: pointer;
    user-select: none;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    outline: none;
    transition: 0.1s;
}

/* 定义按钮类型颜色对象 */
$btn-color-map: (
    primary: #409eff,
    success: #67c23a,
    warning: #e6a23c,
    danger: #f56c6c,
    info: #909399
);

/* 生成 .btn.type--primary{}，.btn.type--success{} 等样式选择器下的样式 */
@each $type in map-keys($btn-color-map) {
    $btn-color: map.get($btn-color-map, $type);
    .btn.type--#{$type} {
        $bg-color: $btn-color;
        $text-color: #ffffff;

        color: $text-color;
        background-color: $bg-color;
        border-color: $bg-color;
        &:hover {
            // background-color: lighten($bg-color, 10%);
            background-color: color.adjust($bg-color, $lightness: 10%);
        }
        &:active {
            // background-color: darken($bg-color, 10%);
            background-color: color.adjust($bg-color, $lightness: -10%);
        }
        &:disabled {
            // color: lighten($text-color, 40%);
            color: color.adjust($text-color, $lightness: 40%);
            background-color: color.adjust($bg-color, $lightness: 20%);
        }
    }
}

/***************  end  ****************/
